<template>
  <section class="page">
    <headerbar>红友管理</headerbar>
    <section class="">
      <ul class="tab">
        <li @click="onPullingDownFrinds()" :class="{'active':tabIndex==0}"><span>我的红友</span></li>
        <li @click="onPullingDown()" :class="{'active':tabIndex==2}"><span>我的申请</span></li>
        <li @click="onPullingDownFrindsApply()" :class="{'active':tabIndex==1}"><span>好友申请</span></li>
      </ul>
    </section>

      <!--我的申请-->
      <section class="d-scroll mgt-2" v-if="tabIndex === 2">
        <cube-scroll
          ref="scroll"
          :options="options"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"

        >
          <fetchData  class="project-tip" :loading="isLoading" :data="myApplys"></fetchData>
          <section class="people-list ">
            <div @click="checkUser(item)" v-for="item in myApplys" class="people-item block noborder">
              <section class="people-info">
                <div class="avatar-img">
                  <!--<img src="../../../../static/images/default.jpg" >-->
                <!--  <img v-if="!item.friendNamePhoto || item.friendNamePhoto === ''" src="../../../../static/images/default.jpg" >-->
                  <img :src="tools.getAvatarUrl(item.friendId,true)" >
                </div>
                <div class="text-wrap">
                  <div class="name">{{item.friendName}}</div>
                  <div class="tip">申请理由：{{item.applyReasion}}</div>
                  <div class="tip">申请时间：{{getTime(item.applyTime)}}</div>
                </div>
              </section>
            </div>

            <abnormal  class="people-list" @refresh="getMyApply" v-if="abnormal"></abnormal>
            <div class="text-center no-data" :loading="isLoading" v-else-if="!isLoading && myApplys.length===0 && showNoData">
              <img src="../../../../static/images/no_data.png" >
              <p>暂无数据</p>
            </div>
            <onBottom v-else-if="onBottom"></onBottom>
            <p class="pdv-5"></p>
            <p class="pdv-5"></p>
          </section>
        </cube-scroll>
      </section>
      <!--好友申请-->
      <section class="d-scroll mgt-2" v-if="tabIndex === 1">
        <cube-scroll
          ref="scroll"
          :options="optionsFrindsApply"
          @pulling-up="onPullingUpFrindsApply"
          @pulling-down="onPullingDownFrindsApply"

        >
          <fetchData  class="people-list" :loading="isLoading" :data="frindsApply"></fetchData>
          <section class="people-list ">
            <div @click="checkUser(item)" v-for="item in frindsApply" class="people-item block noborder">
              <section class="people-info">
                <div class="avatar-img">
                 <!-- <img src="../../../../static/images/default.jpg" >-->
                  <!--<img v-if="!item.applyUserPhoto || item.applyUserPhoto === ''" src="../../../../static/images/default.jpg" >-->
                  <img :src="tools.getAvatarUrl(item.applyUserId,true)" >
                </div>
                <div class="text-wrap">
                  <div class="name">{{item.applyUserName}}</div>
                  <div class="tip">申请理由：{{item.applyReasion}}</div>
                  <div class="tip">申请时间：{{getTime(item.applyTime)}}</div>
                  <div v-if="item.status==='2'" class="tip">不同意原因：{{item.replyReasion}}</div>
                </div>
              </section>
              <div class="btns" v-if="item.status === '0'">
                <div class="btn" @click.stop="agreeApply(item, '1')">同意</div>
                <div class="btn disable" @click.stop="showAlert(item, '2')">不同意</div>
              </div>

            </div>

            <abnormal  class="people-list" @refresh="getFrindsApply" v-if="abnormal"></abnormal>
            <div class="text-center no-data" :loading="isLoading" v-else-if="!isLoading && frindsApply.length===0 && showNoData">
              <img src="../../../../static/images/no_data.png" >
              <p>暂无数据</p>
            </div>
            <onBottom v-else-if="onBottomFrindsApply"></onBottom>
            <p class="pdv-5"></p>
            <p class="pdv-5"></p>
          </section>
        </cube-scroll>
      </section>
      <!--红友列表-->
      <section class="d-scroll mgt-2" v-if="tabIndex === 0">
        <cube-scroll
          ref="scroll"
          :options="optionsFriends"
          @pulling-up="onPullingUpFrinds"
          @pulling-down="onPullingDownFrinds"

        >
          <fetchData  class="people-list" :loading="isLoading" :data="frinds"></fetchData>
          <section class="people-list ">
            <div v-for="item in frinds" class="people-item block noborder" @click="goDetail(item.userId)">
              <section class="people-info">
                <div class="avatar-img">
                  <!--<img v-if="!item.photo || item.photo === ''" src="../../../../static/images/default.jpg" >-->
                  <img :src="tools.getAvatarUrl(item.userId,true)" >
                </div>
                <div class="name">
                  {{item.userName}}
                </div>
              </section>
              <div class="btns">
                <div class="btn" @click.stop="showDeleteAlert(item)">删除</div>
              </div>

            </div>
            <abnormal  class="people-list" @refresh="getFriends" v-if="abnormal"></abnormal>
            <div class="text-center no-data"  v-else-if="!isLoading &&frinds.length===0 && showNoData">
              <img src="../../../../static/images/no_data.png" >
              <p>暂无数据</p>
            </div>
            <onBottom v-else-if="onBottomFrinds"></onBottom>
            <p class="pdv-5"></p>
            <p class="pdv-5"></p>
          </section>
        </cube-scroll>
      </section>

  </section>
</template>


<script>
  import _ from 'lodash'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import moment from 'moment'
  export default {
    name: 'personnelSelection',
    data () {
      return {
        isLoading: true,
        myApplys: [],
        frindsApply: [],
        frinds: [],
        abnormal: false,
        tabIndex: 0,
        replyReasion: '',
        checking: false,
        showNoData: false,
        pageIndex:1,// 我的申请分页
        options: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: " ",
          },
        },
        onBottom:false,
        pageIndexFriends:1,// 我的红友分页
        optionsFriends: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: " ",
          },
        },
        onBottomFrinds:false,
        pageIndexFrindsApply:1,// 我的红友分页
        optionsFrindsApply: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: " ",
          },
        },
        onBottomFrindsApply:false,
      }
    },
    created () {
      this.tabIndex = this.$route.params.index || 0 // this.$route.params.index用于推送跳转至指定页面
      if(this.tabIndex === 1){
        this.getFrindsApply()
      }else{
        this.getFriends()
      }
    },
    methods: {
      onPullingUp() {
        console.log("onPullingUp");
        this.getMyApply();
      },
      onPullingDown() {
        this.onBottom =false
        this.myApplys = []
        this.options.pullUpLoad = true;
        console.log("onPullingDown");
        this.pageIndex = 1;
        this.getMyApply();
      },
      getMyApply () {
        this.abnormal = false
        this.isLoading = true
        this.showNoData = false
        this.tabIndex = 2
        let data = {
          page: this.pageIndex,
          limit: 10
        }
        this.fetchService.getMyApplyList(data).then(res => {
          this.isLoading = false
          this.showNoData = true
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            if (res.code == 444) {
              this.abnormal = true
            } else {
              return tools.tip(res.message)
            }
          }
          if (res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.options.pullUpLoad = false;
            this.onBottom = true
            return;
          }
          console.log(res)
          this.isLoading = false
          this.myApplys = this.myApplys.concat(res.data);
          this.pageIndex++;
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        })
      },
      onPullingUpFrindsApply() {
        console.log("onPullingUp");
        this.getFrindsApply();
      },
      onPullingDownFrindsApply() {
        this.onBottomFrindsApply =false
        this.frindsApply = []
        this.optionsFrindsApply.pullUpLoad = true;
        console.log("onPullingDown");
        this.pageIndexFrindsApply = 1;
        this.getFrindsApply();
      },
      getFrindsApply () {
        this.isLoading = true
        this.abnormal = false
        this.showNoData = false
        this.tabIndex = 1
        let data = {
          page: this.pageIndexFrindsApply,
          limit: 10
        }
        this.fetchService.getFrindsApplyList(data).then(res => {
          this.isLoading = false
          this.showNoData = true
          if (res.code !== 0) {
            if (res.code == 444) {
              this.abnormal = true
            } else {
              return tools.tip(res.message)
            }
          }
          if (res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.optionsFrindsApply.pullUpLoad = false;
            this.onBottomFrindsApply = true
            return;
          }
          console.log(res)
          this.isLoading = false
          this.frindsApply = this.frindsApply.concat(res.data);
          this.pageIndexFrindsApply++;
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        })
      },
      agreeApply (item, status) {
        let data = {
          id: item.id,
          status: status
        }
        this.fetchService.agreeApply(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.frindsApply = []
          this.getFrindsApply()
        })
      },
      friendApplyPut (item, promptValue) {
        let data = {
          id: item.id,
          replyReasion: promptValue,
          status: '2'
        }
        this.fetchService.friendApplyPut(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.frindsApply = []
          this.getFrindsApply()
        })
      },
      showAlert (data, status) {
        this.dialog = this.$createDialog({
          type: 'prompt',
          title: '不同意说明',
          prompt: {
            value: '',
            placeholder: '不同意说明'
          },
          onConfirm: (e, promptValue) => {
            this.friendApplyPut(data, promptValue)
            // this.deletefriend(data)
            this.agreeApply(data, status)
            console.log('this.promptValue=', promptValue)
          }
        }).show()
      },
      showDeleteAlert (item) {
        let me = this
        this.$createDialog({
          type: 'confirm',
          title: '确定删除好友？',
          content: '',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.deletefriend(item)
          },
          onCancel: () => {
          }
        }).show()
      },
      deletefriend (item) {
        this.fetchService.deletefriend(item.id).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.frindsApply = []
          this.getFriends()
        })
      },
      onPullingUpFrinds() {
        console.log("onPullingUp");
        this.getFriends();
      },
      onPullingDownFrinds() {
        this.onBottomFrinds =false
        this.frinds = []
        this.optionsFriends.pullUpLoad = true;
        console.log("onPullingDown");
        this.pageIndexFriends = 1;
        this.getFriends();
      },
      getFriends () {
        this.abnormal = false
        this.isLoading = true
        this.showNoData = false
        this.tabIndex = 0
        let data = {
          page: this.pageIndexFriends,
          limit: 10,
          params: {}
        }
        this.fetchService.friends(data).then(res => {
          this.isLoading = false
          this.showNoData = true
          if (res.code !== 0) {
            if (res.code == 444) {
              this.abnormal = true
            } else {
              return tools.tip(res.message)
            }
          }
          if (res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.optionsFriends.pullUpLoad = false;
            this.onBottomFrinds = true
            return;
          }
          console.log(res)
          this.isLoading = false
          this.frinds = this.frinds.concat(res.data);
          this.pageIndexFriends++;
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        })
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY年MM月DD日')
      },
      showImg (fileId) {
        let fileUrl = this.tools.getImgUrl(fileId)
        console.log('-------------fileUrl=', fileUrl)
        return fileUrl
      },
      checkUser (item) {
        if (this.checking) {
          return false
        }
        this.checking = true
        this.fetchService.getIsFriend({userId: item.id}).then(res => {
          this.checking = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.goDetail(item.id)
        })
      },
      goDetail (id) {
        this.$router.push({name: `redfriendscircle`, query: {type: 2, userId: id}, params: {from: 'home'}})
//        this.$router.push({path: `/friendInfo/${id}`})
      }
    }
  }
</script>

<style scoped lang="scss">
  .people-list .people-item{
    .name {
      font-size: 16PX;
      color: #333;
    }
    .text-wrap {
      .name{
        line-height:1.5em;
      }
      .tip {
        line-height:1.5em;
        font-size: 12PX;
      }
    }
  }
  .d-scroll {
    height: calc(100vh - 2rem - .66667rem);
  }
</style>
